<template>
    <div>

        <el-card style="width: 100%; height: 10vh;">
            <el-form :inline="true" :rules="rules" ref="searchRef" :validate-on-rule-change="false">

                <el-form-item label="用户名" label-width="70px">
                    <el-input style="width: 175px" clearable v-model="searchUsername"
                              placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item label="姓名" label-width="55px">
                    <el-input style="width: 175px" clearable v-model="searchName" placeholder="请输入姓名"></el-input>
                </el-form-item>

                <el-form-item label="手机号" label-width="60px">
                    <el-input style="width: 175px" type="number" clearable v-model="searchPhone"
                              placeholder="请输入手机号"></el-input>
                </el-form-item>

                <!--
                                <el-form-item label="电子邮箱" label-width="80px">
                                    <el-input style="width: 175px" clearable v-model="searchEmail" placeholder="请输入电子邮箱"></el-input>
                                </el-form-item>
                -->

                <el-form-item label="状态" label-width="53px">
                    <el-select v-model="searchStatus" placeholder="请选择" clearable>
                        <el-option
                                v-for="item in statuss"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-button style="margin-left: 20px" type="primary" @click="searchByManyCondition" plain> 搜 索
                </el-button>
                <el-button @click="resetCondition"> 重 置</el-button>
            </el-form>
        </el-card>


        <!--     用户信息表格        -->
        <el-card style="width: 100%; ">

            <!--       用户信息    标题-->
            <div slot="header" class="clearfix">
                <span style="font-weight: bold;font-size: 18px">用户信息</span>
                <el-button style="float: right;margin-right: 10px" type="danger" @click="deleteSelectUsers"> 删除选中
                </el-button>
                <el-button style="float: right;margin-right: 20px" type="primary" plain @click="showAddUser"> 添加用户
                </el-button>
                <el-button style="float: right;margin-right: 10px" type="primary" plain @click="selectAll"> 查询所有用户
                </el-button>

                <!-- 添加信息的弹窗 -->
                <el-dialog title="添加用户" :visible.sync="dialogVisible_addUser">
                    <el-form :model="add_user" size="medium" :rules="rules" ref="addUserRef"
                             :validate-on-rule-change="false">

                        <el-form-item prop="username" label="账号" label-width="100px">
                            <el-input v-model="add_user.username" placeholder="请输入账号"></el-input>
                        </el-form-item>

                        <el-form-item prop="password" label="密码" label-width="100px">
                            <el-input show-password v-model="add_user.password" placeholder="请输入密码"
                                      autocomplete="off"></el-input>
                        </el-form-item>

                        <el-form-item prop="name" label="昵称" label-width="100px">
                            <el-input v-model="add_user.name" autocomplete="off" placeholder="请输入昵称"></el-input>
                        </el-form-item>

                        <el-form-item prop="phone" label="手机号" label-width="100px">
                            <el-input v-model="add_user.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
                        </el-form-item>

                        <el-form-item prop="email" label="电子邮箱" label-width="100px">
                            <el-input v-model="add_user.email" autocomplete="off"
                                      placeholder="请输入电子邮箱"></el-input>
                        </el-form-item>

                        <el-form-item prop="address" label="地址" label-width="100px">
                            <el-input v-model="add_user.address" autocomplete="off" placeholder="请输入地址"></el-input>
                        </el-form-item>

                        <!--

                                                <el-form-item prop="avatarUrl" label="头像" label-width="100px">
                                                    <div style="display: flex;align-items: center;flex-direction: row;margin: 20px">
                                                        <el-avatar shape="square" :size="100" fit="fill"
                                                                   :src="avatarUrl"></el-avatar>
                                                        <el-upload
                                                            :show-file-list="false"
                                                            :action="$baseUrl + '/file/upload'"
                                                            :on-success="handleFileUpload"
                                                            style="margin-left: 50px"
                                                        >
                                                            <el-button type="primary">上传头像</el-button>
                                                        </el-upload>

                                                    </div>
                                                </el-form-item>
                        -->

                        <el-form-item prop="avatar" label="头像" label-width="100px">
                            <div style="display: flex;align-items: center;flex-direction: row;margin: 20px">
                                <el-avatar shape="square" :size="100" fit="fill"
                                           :src="add_user.avatar" :key="add_user.avatar"></el-avatar>
                                <el-upload
                                        :show-file-list="false"
                                        :action="$baseUrl + '/file/upload'"
                                        :on-success="handleFileUpload"
                                        style="margin-left: 50px"
                                >
                                    <el-button type="primary">上传头像</el-button>
                                </el-upload>

                            </div>
                        </el-form-item>

                        <el-form-item prop="status" label="状态" label-width="100px">
                            <el-select v-model="add_user.status" placeholder="请选择状态">
                                <el-option
                                        v-for="item in statuss"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>


                    <div slot="footer" class="dialog-footer">
                        <el-button type="warning" @click="resetAddUser"> 重 置</el-button>
                        <el-button @click="cancelDialog_addUser"> 取 消</el-button>
                        <el-button type="primary" @click="handleEdit_addUser"> 确 定</el-button>
                    </div>

                </el-dialog>


                <!-- 删除用户信息的弹窗 -->
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible_deleteSelect"
                        width="30%">
                    <span>真的要删除选中的所有信息吗？</span>
                    <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible_deleteSelect = false">取 消</el-button>
                                    <el-button type="danger" @click="handleDeleteUsers">确 定</el-button>
                                </span>
                </el-dialog>


            </div>


            <!--    用户信息列表    展示-->
            <template>
                <el-table height="410"
                          :header-cell-style="{fontSize: '14px','text-align':'center'}"
                          :cell-style="{'text-align':'center'}"
                          :data="users"
                          @selection-change="handleSelectCodeForTicket"
                          stripe
                          style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column width="50" label="序号" type="index" align="center"></el-table-column>
                    <el-table-column prop="username" label="用户名" show-overflow-tooltip
                                     width="100px"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="150px"></el-table-column>
                    <el-table-column prop="phone" label="手机号" width="120px"></el-table-column>
                    <el-table-column prop="email" label="电子邮箱" show-overflow-tooltip
                                     width="180px"></el-table-column>
                    <el-table-column prop="address" label="地址" show-overflow-tooltip width="200px"></el-table-column>
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">
                            <el-tag type="danger" effect="dark" v-if="scope.row.status==0">已删除</el-tag>
                            <el-tag type="success" effect="dark" v-if="scope.row.status==1">正常</el-tag>
                            <el-tag type="info" effect="dark" v-if="scope.row.status==2">锁定中</el-tag>
                            <el-tag type="warning" effect="dark" v-if="scope.row.status==3">冻结中</el-tag>
                        </template>
                    </el-table-column>

                    <!--                                    头像显示    -->
                    <el-table-column prop="avatar" label="头像" width="100px">
                        <template slot-scope="scope">
                            <el-avatar shape="square" :size="50" fit="fill" :src="scope.row.avatar"></el-avatar>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作">

                        <!--          编辑  +  删除   用户-->
                        <template slot-scope="scope">

                            <!--                                    查看详情        -->
                            <!--                                            查看详情按钮    -->
                            <router-link style="margin: 0 10px"
                                         :to="{ path: '/manager/userInfo', query: { id: scope.row.id } }">
                                <el-button icon="el-icon-search" circle></el-button>
                            </router-link>

                            <!--                                            编辑按钮    -->
                            <el-button type="primary" icon="el-icon-edit" circle
                                       @click="handleEditButton(scope.row)"></el-button>
                            <!--                                            删除按钮    -->
                            <el-button type="danger" icon="el-icon-delete" circle
                                       @click="handleDeleteButton(scope.row)"></el-button>


                            <!-- 删除用户信息的弹窗 -->
                            <el-dialog
                                    title="提示"
                                    :visible.sync="dialogVisible_delete"
                                    width="30%">
                                <span style="display: flex;">真的要删除这条信息吗？</span>
                                <span slot="footer" class="dialog-footer">
                                    <el-button @click="dialogVisible_delete = false">取 消</el-button>
                                    <el-button type="danger" @click="handleDeleteUser">确 定</el-button>
                                </span>
                            </el-dialog>


                            <!-- 编辑信息的弹窗 -->
                            <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible_edit">
                                <el-form :model="edit_user" size="medium" :rules="rules" ref="editUserRef"
                                         :validate-on-rule-change="false">

                                    <el-form-item label="ID" label-width="100px">
                                        <el-input v-model="edit_user.id" :disabled="true"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="username" label="账号" label-width="100px">
                                        <el-input v-model="edit_user.username" placeholder="请输入账号"></el-input>
                                    </el-form-item>

                                    <el-form-item label="密码" label-width="100px">
                                        <el-input show-password v-model="edit_user.password"
                                                  autocomplete="off" placeholder="请输入新密码"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="name" label="昵称" label-width="100px">
                                        <el-input v-model="edit_user.name" autocomplete="off"
                                                  placeholder="请输入昵称"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="phone" label="手机号" label-width="100px">
                                        <el-input v-model="edit_user.phone" autocomplete="off"
                                                  placeholder="请输入手机号"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="email" label="电子邮箱" label-width="100px">
                                        <el-input v-model="edit_user.email" autocomplete="off"
                                                  placeholder="请输入电子邮箱"></el-input>
                                    </el-form-item>

                                    <el-form-item prop="address" label="地址" label-width="100px">
                                        <el-input v-model="edit_user.address" autocomplete="off"
                                                  placeholder="请输入地址"></el-input>
                                    </el-form-item>

                                    <!--

                                                                        <el-form-item label="头像" label-width="100px">
                                                                            <div style="display: flex;align-items: center;flex-direction: row;margin: 20px">
                                                                                <el-avatar shape="square"
                                                                                           :size="100"
                                                                                           fit="fill"
                                                                                           :src="avatarUrl"
                                                                                           style="margin-left: 50px"
                                                                                ></el-avatar>
                                                                                <el-upload
                                                                                        :show-file-list="false"
                                                                                        :action="$baseUrl + '/file/upload'"
                                                                                        :on-success="handleFileUpload"
                                                                                        style="margin-left: 50px"
                                                                                >
                                                                                    <el-button type="primary">上传头像</el-button>
                                                                                </el-upload>

                                                                            </div>

                                                                        </el-form-item>

                                    -->

                                    <el-form-item prop="avatar" label="头像" label-width="100px">
                                        <div style="display: flex;align-items: center;flex-direction: row;margin: 20px">
                                            <el-avatar shape="square" :size="100" fit="fill"
                                                       :src="edit_user.avatar" style="margin-left: 50px"></el-avatar>
                                            <el-upload
                                                    :show-file-list="false"
                                                    :action="$baseUrl + '/file/upload'"
                                                    :on-success="handleFileUpload"
                                                    style="margin-left: 50px"
                                            >
                                                <el-button type="primary">上传头像</el-button>
                                            </el-upload>

                                        </div>
                                    </el-form-item>


                                    <el-form-item prop="status" label="状态" label-width="100px">
                                        <el-select style="float: left;margin-left: 50px" v-model="edit_user.status"
                                                   placeholder="请选择状态">
                                            <el-option
                                                    v-for="item in statuss"
                                                    :key="item.value"
                                                    :label="item.label"
                                                    :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                </el-form>


                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="cancelDialog_editUser">取 消</el-button>
                                    <el-button type="primary" @click="handleEdit">确 定</el-button>
                                </div>

                            </el-dialog>
                        </template>
                    </el-table-column>


                </el-table>

            </template>

            <el-pagination
                    style="float: right;margin: 20px 0"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next"
                    background
                    :total="total">
            </el-pagination>
            <!--
                            @size-change="handleSizeChange"          pageSize 改变时会触发
                            @current-change="handleCurrentChange"    currentPage 改变时会触发
            -->
        </el-card>

    </div>
</template>

<script>

import crypto from "@/utils/encryp";
import dateUtil from '@/utils/dateUtil'

export default {
    name: 'User',
    data() {
        // 手机号验证
        const validatePhone = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入手机号"));
            } else {
                if (!/^1[3456789]\d{9}$/.test(value)) {
                    callback(new Error("请输入正确的手机号"));
                } else {
                    callback();
                }
            }
        };
        return {
            dialogFormVisible_edit: false,     // 编辑按钮弹出框
            dialogVisible_delete: false,       // 删除按钮弹出框
            dialogVisible_deleteSelect: false, // 选中删除按钮弹出框
            dialogVisible_addUser: false,      // 添加用户按钮弹出框


            userId: '',             // 存储被删除用户的id
            ids: [],                // 存储被选中用户的id

            users: [],              // 存储用户信息

            edit_user: {},          // 存储当前操作的用户
            edit_user_temp: {},     // 存储当前操作的用户,保存原始数据

            add_user: {
                status: []
            },                      // 存储添加的用户信息


            avatarUrl: '',          // 暂存后台传回来的图片链接


            searchUsername: '',     // 存储搜索的用户名
            searchName: '',         // 存储搜索的姓名
            searchPhone: '',        // 存储搜索的手机号
            searchEmail: '',        // 存储搜索的邮箱
            searchStatus: '',       // 存储搜索的状态
            statuss: [{             // 存储所有状态
                value: 0,
                label: '已删除'
            }, {
                value: 1,
                label: '正常'
            }, {
                value: 2,
                label: '锁定中'
            }, {
                value: 3,
                label: '冻结中'
            }],

            currentPage: 1,         // 当前页码
            pageSizes: [5, 10, 50, 100], // 每页显示条数
            pageSize: 5,            // 每页显示条数
            total: 0,               // 用户总数


            // 输入校验规则
            rules: {
                username: [
                    {required: true, message: '请输入账号', trigger: 'blur'},
                    {min: 4, message: '账号最少为4个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ],
                name: [
                    {required: true, message: '请输入昵称', trigger: 'blur'}
                ],
                phone: [
                    {required: true, validator: validatePhone, message: '请输入正确手机号', trigger: "change"}
                ],
                email: [
                    {required: true, type: 'email', message: '请输入正确的邮箱地址', trigger: 'change'}
                ],
                address: [
                    {required: true, message: '请输入地址', trigger: 'blur'}
                ],
                avatarUrl: [
                    {required: true, message: '请上传头像', trigger: 'blur'}
                ],
                avatar: [
                    {required: true, message: '请上传头像', trigger: 'blur'}
                ]
                // ,
                // status: [
                //     {required: true, message: '请选择状态', trigger: 'change', type: 'number'}
                // ],
                // searchStatus: [
                //     {required: true, message: '请选择状态', trigger: 'change', type: 'number'}
                // ]

            }

        }

    },
    mounted() {
        this.$request.get('/user/selectByPage?currentPage=1&pageSize=5').then(res => {
            if (res.code === '200') {
                this.users = res.data.list;
                this.total = res.data.total;
            } else {
                this.$message.error(res.msg);
            }
        })
    },
    methods: {

        // 移除表单的校验
        clearcheck(formName) {
            if (this.$refs[formName]) {
                this.$refs[formName].clearValidate()
            }
        },


        // 查询所有用户
        selectAll() {
            this.$request.get('/user/selectByPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize).then(res => {
                if (res.code === '200') {
                    this.users = res.data.list;
                    this.total = res.data.total;
                    this.$message.success('查询成功');
                } else {
                    this.$message.error(res.msg);
                }
            })
        },

        // 添加用户
        handleEdit_addUser() {
            // 将头像数据载入
            // this.add_user.avatar = this.avatarUrl

            // 加密密码处理
            if (this.add_user.password !== ''
                && this.add_user.password !== undefined
                && this.add_user.password !== null) {
                // 加密密码处理
                let pwd = this.add_user.password.toString()
                pwd = this.$md5(pwd)
                this.add_user.password = pwd
            } else {
                this.$message.error('密码不能为空');
            }
            // 设置创建时间
            this.add_user.createTime = dateUtil.formatDate(new Date())
            // 输入检验
            this.$refs['addUserRef'].validate((valid) => {
                this.dialogVisible_addUser = false;
                if (valid) {
                    // 校验通过
                    this.avatarUrl = ''
                    // 添加用户
                    this.$request.post('/user/addUser', this.add_user).then(res => {
                        this.add_user = {}
                        if (res.code === '200') {
                            this.$message.success('添加成功')
                            this.selectByPage()
                        } else {
                            this.$message.error(res.msg)
                        }
                    })
                } else {
                    this.$message.error('请输入完整信息')
                }
            })
        },


        // 取消添加用户
        cancelDialog_addUser() {
            this.avatarUrl = ''
            this.dialogVisible_addUser = false;
        },

        // 重置添加的信息
        resetAddUser() {
            this.add_user = {}
            this.avatarUrl = ''
        },

        // 显示添加用户的弹出框
        showAddUser() {
            this.clearcheck('addUserRef')
            this.dialogVisible_addUser = true;
            this.avatarUrl = ''
            this.add_user = {}
        },


        // 删除选中二次确认
        handleDeleteUsers() {
            this.dialogVisible_deleteSelect = false;
            if (this.ids.length > 0) {
                // 删除选中
                this.$request.post('/user/deleteByIds', this.ids).then(res => {
                    if (res.code === '200') {
                        this.$message.success('删除成功');
                        // 刷新数据
                        this.searchByManyConditionNoMsg()
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            } else {
                this.$message.info('请选择要删除的用户');
            }

        },


        // 删除选中二次提醒
        deleteSelectUsers() {
            // 显示二次提醒弹窗
            this.dialogVisible_deleteSelect = true;
        },

        // 获取选中的用户id，
        // 并存储到 ids 数组中
        handleSelectCodeForTicket(val) {
            this.ids = val.map((item) => item.id);
        },


        // currentPage 改变时会触发
        handleCurrentChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.currentPage = val;

            // 发送请求获取相应数量的数据
            this.searchByManyConditionNoMsg()
        },


        //  pageSize 改变时会触发
        handleSizeChange(val) {
            // 获取  当前页 和 页面大小  currentPage、pageSize
            this.pageSize = val;
            this.currentPage = 1;

            // 发送请求获取相应数量的数据
            this.searchByManyConditionNoMsg()
        },


        // 条件查询
        // 旧
        /*searchByManyCondition() {
            this.$request.get('/user/selectByManyConditionInpage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&username=' + this.searchUsername + '&name=' + this.searchName + '&phone=' + this.searchPhone + '&email=' + this.searchEmail).then(res => {
                if (res.code === '200') {
                    this.users = res.data.list
                    this.total = res.data.total
                    this.$message.success("查询成功");
                } else {
                    this.$message.error(res.msg);
                }
            })
        },*/
        // 新
        /* searchByManyCondition() {

             // 输入检验
             this.$refs['searchRef'].validate((valid) => {
                 if (valid) {
                     // 校验通过
                     this.$request.get('/user/selectByManyConditionInpage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&username=' + this.searchUsername + '&name=' + this.searchName + '&phone=' + this.searchPhone + '&status=' + this.searchStatus).then(res =>  {
                         if (res.code === '200') {
                             this.users = res.data.list
                             this.total = res.data.total
                             this.$message.success("查询成功");
                         } else {
                             this.$message.error(res.msg);
                         }
                     })
                 } else {
                     this.$message.error('请输入完整信息')
                 }
             })
         },*/
        searchByManyCondition() {
            // 如果状态未选择的话，调用A接口
            // 否则调用B接口
            // A接口不包括状态参数
            // B接口包括状态参数
            if (this.searchStatus !== '' && this.searchStatus !== null && this.searchStatus !== undefined) {
                // 如果searchStatus的值不为空，则将其转换为整数
                this.searchStatus = parseInt(this.searchStatus)
                this.$request.get('/user/selectByManyConditionInpage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&username=' + this.searchUsername + '&name=' + this.searchName + '&phone=' + this.searchPhone + '&status=' + this.searchStatus).then(res => {
                    if (res.code === '200') {
                        this.users = res.data.list
                        this.total = res.data.total
                        this.$message.success("查询成功");
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            } else {
                this.$request.get('/user/selectByManyConditionNoStatusInpage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&username=' + this.searchUsername + '&name=' + this.searchName + '&phone=' + this.searchPhone).then(res => {
                    if (res.code === '200') {
                        this.users = res.data.list
                        this.total = res.data.total
                        this.$message.success("查询成功");
                    } else {
                        this.$message.error(res.msg);
                    }
                })

            }
        },

        /*        // 条件查询 用来刷新数据不提示
                searchByManyConditionNoMsg() {
                    this.$request.get('/user/selectByManyConditionInpage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&username=' + this.searchUsername + '&name=' + this.searchName + '&phone=' + this.searchPhone + '&email=' + this.searchEmail).then(res => {
                        if (res.code === '200') {
                            this.users = res.data.list
                            this.total = res.data.total
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                },*/

        // 分页查找
        // 条件查询 用来刷新数据不提示
        searchByManyConditionNoMsg() {
            // 如果状态未选择的话，调用A接口
            // 否则调用B接口
            // A接口不包括状态参数
            // B接口包括状态参数
            if (this.searchStatus !== '' && this.searchStatus !== null && this.searchStatus !== undefined) {
                // 如果searchStatus的值不为空，则将其转换为整数
                this.searchStatus = parseInt(this.searchStatus)
                this.$request.get('/user/selectByManyConditionInpage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&username=' + this.searchUsername + '&name=' + this.searchName + '&phone=' + this.searchPhone + '&status=' + this.searchStatus).then(res => {
                    if (res.code === '200') {
                        this.users = res.data.list
                        this.total = res.data.total
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            } else {
                this.$request.get('/user/selectByManyConditionNoStatusInpage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize + '&username=' + this.searchUsername + '&name=' + this.searchName + '&phone=' + this.searchPhone).then(res => {
                    if (res.code === '200') {
                        this.users = res.data.list
                        this.total = res.data.total
                    } else {
                        this.$message.error(res.msg);
                    }
                })

            }
        },

        selectByPage() {
            this.$request.get('/user/selectByPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize).then(res => {
                if (res.code === '200') {
                    this.users = res.data.list
                    this.total = res.data.total
                } else {
                    this.$message.error(res.msg);
                }
            })
        },


        // 重置搜索条件
        resetCondition() {
            this.searchUsername = ''
            this.searchName = ''
            this.searchPhone = ''
            this.searchEmail = ''
            // this.searchStatus = 1
            this.searchStatus = ''
            this.currentPage = 1
            this.pageSize = 5
            // 刷新获取用户信息
            this.$request.get('/user/selectByPage?currentPage=' + this.currentPage + '&pageSize=' + this.pageSize).then(res => {
                if (res.code === '200') {
                    this.users = res.data.list
                    this.total = res.data.total
                    this.$message.success("重置成功")
                } else {
                    this.$message.error(res.msg);
                }
            })
        },


        /*        // 处理 头像上传按钮   的点击事件
                handleFileUpload(response, file, fileList) {
                    if (response.data){
                        // 数据解密
                        let key = "dianzishumaMall0"; //加密密钥
                        let iv = "dianzishumaMall0"; //加密aesIV，偏移量

                        const data = crypto.decryptAES(response.data, key, iv)
                        response.data = JSON.parse(data)
                    }
                    //  1. 获取上传成功后返回的图片地址

                    let url = response.data;
                    // 2. 修改表单中对应的字段值
                    this.avatarUrl = url;
                },*/

        // 处理 头像上传按钮   的点击事件
        handleFileUpload(response, file, fileList) {
            // 判断上传的文件的类型
            // 只能上传图片类型，如果不是图片资源那么提示“只能上传图片！！”
            if (!file.raw.type.includes('image')) {
                this.$message.error('只能上传图片！')
                return
            }
            if (response.data) {
                // 数据解密
                let key = "dianzishumaMall0"; //加密密钥
                let iv = "dianzishumaMall0"; //加密aesIV，偏移量

                const data = crypto.decryptAES(response.data, key, iv)
                response.data = JSON.parse(data)
            }
            //  1. 获取上传成功后返回的图片地址

            let url = response.data;
            // 2. 修改表单中对应的字段值
            this.avatarUrl = url
            this.add_user.avatar = this.avatarUrl
            this.edit_user.avatar = this.avatarUrl
            this.$forceUpdate()
        },

        // 显示 修改用户信息    弹窗
        handleEditButton(user) {
            // 将当前行的用户数据传入form中
            this.edit_user = JSON.parse(JSON.stringify(user))
            this.edit_user_temp = JSON.parse(JSON.stringify(user))
            // 更新当前头像
            this.avatarUrl = JSON.parse(JSON.stringify(user.avatar))
            // 状态转化
            let status = parseInt(user.status)
            for (let i = 0; i < this.statuss.length; i++) {
                if (status === this.statuss[i].value) {
                    this.edit_user.status = this.statuss[i].label
                    break
                }
            }
            // 删除用户密码信息
            this.edit_user.password = ''

            this.clearcheck('editUserRef')

            // 显示弹窗
            this.dialogFormVisible_edit = true;
        },

        // 取消修改信息
        cancelDialog_editUser() {
            let status = this.edit_user.status
            // for (let i = 0; i < this.statuss.length; i++) {
            //     if (status === this.statuss[i].label) {
            //         this.edit_user.status = this.statuss[i].value + ''
            //         break
            //     }
            // }

            this.dialogFormVisible_edit = false;
            this.edit_user = {}
            this.avatarUrl = ''

        },

        // 删除按钮二次提醒
        handleDeleteButton(user) {
            this.dialogVisible_delete = true
            this.userId = user.id
        },


        // 删除当前用户
        handleDeleteUser() {
            this.dialogVisible_delete = false;
            this.$request.delete('/user/deleteById/' + this.userId).then(res => {
                if (res.code === '200') {
                    this.$message.success('删除成功');
                    this.userId = ''
                    // 重新加载数据
                    this.searchByManyConditionNoMsg()
                } else {
                    this.$message.error(res.msg);
                }
            })
        },

        // 修改用户信息
        handleEdit() {
            // 更新用户头像信息
            this.edit_user.avatar = this.avatarUrl
            // 密码处理
            if (this.edit_user.password !== ''
                && this.edit_user.password !== undefined
                && this.edit_user.password !== null) {
                // 加密密码处理
                let pwd = this.edit_user.password.toString()
                pwd = this.$md5(pwd)
                this.edit_user.password = pwd
            } else {
                this.edit_user.password = this.edit_user_temp.password
            }
            // 状态转化
            for (let i = 0; i < this.statuss.length; i++) {
                if (this.edit_user.status === this.statuss[i].label) {
                    this.edit_user.status = this.statuss[i].value
                    break
                }
            }

            this.dialogFormVisible_edit = false;

            // 输入检验
            this.$refs['editUserRef'].validate((valid) => {
                if (valid) {
                    // 校验通过
                    console.log(this.edit_user)
                    this.$request.put('/user/updateById', this.edit_user).then(res => {
                        // console.log(res)
                        if (res.code === '200') {
                            this.$message.success('修改成功');
                            this.edit_user = {}
                            this.avatarUrl = ''
                            // 重新加载数据
                            this.searchByManyConditionNoMsg()
                        } else {
                            this.$message.error(res.msg);
                        }
                    })
                } else {
                    this.$message.error('请输入完整信息')
                }
            })


        }


    }
}
</script>


<style>
.el-dialog__body {
    padding: 10px 30px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="number"] {
    -moz-appearance: textfield;
}


</style>